<!-- 左侧导航栏组件 -->
<template>
	<div>
		<el-menu :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			<el-menu-item index="1" @click="handleClick()">
				<i class="el-icon-menu"></i>
				<span slot="title">首页</span>
			</el-menu-item>
			<el-submenu v-for="item in items" :key="item.id" index="2">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>{{ item.name }}</span>
				</template>
				<el-menu-item-group v-for="child  in item.children" :key=" child.id">
					<el-menu-item :index="child.url">{{child.name}}</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
import { menuAPI } from "@/api";
export default {
	data() {
		return {
			items: [
				{
					id: '1',
					parentId: '0',
					name: '系统管理',
					sort: 1,
					levels: 1,
					isMenu: 1,
					routerNmae:"#",
					url: '#',
					status: null,
					children: [
						{
							id: '2',
							parentId: '1',
							name: '用户管理',
							sort: 1,
							levels: 2,
							isMenu: 1,
							url: '/user',
							routerNmae:"sysUser",
							status: null,
							children: null
						},
						{
							id: '3',
							parentId: '1',
							name: '菜单管理',
							sort: 2,
							levels: 2,
							isMenu: 1,
							url: '/menu',
							routerNmae:"sysMenu",
							status: null,
							children: null
						}
					]
				}
			],
		}
	},
	props: {
		isCollapse: {
			default: true
		}
	},
	created() {
		this.initData()
	},
	methods: {
		async initData() {
			//发起请求 获取菜单数据`
			const { data: res } = await menuAPI();
			this.items = res.date;
		},
		handleClick() {
			this.$router.push("/backIndex");
		},
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
</style>